<style>
    .layui-form-item .layui-input-company {
        width: auto;
        padding-right: 10px;
        line-height: 38px;
    }

    .input-def input {
        width: 80%;
        display: inline-block;
    }

    .icon-item {
        position: relative;
        padding: 0 !important;
        margin-top: 9px;
    }

    .icon-log {
        max-width: 80px;
        max-height: 120px;
    }

    .icon-close {
        width: 10px;
        height: 10px;
        position: absolute;
        right: 5px;
        top: 5px;
    }
</style>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">网站设置</li>
                <li>用户管理</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form layuimini-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">网站名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="sitename" lay-verify="required" lay-reqtext="网站域名不能为空"
                                       placeholder="请输入网站名称" value="{:sysconf('sitename')}" class="layui-input">
                                <tip>填写自己部署网站的名称。</tip>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">网站logo</label>
                            <div class="layui-input-block input-def" style="">
                                <input type="text" name="icon" lay-verify="required" autocomplete="off" disabled value="{:sysconf('icon')}" id="icon" class="layui-input">
                                <div class="layui-btn-group">
                                    <button class="layui-btn" id="uploadImage">上传</button>
                                    <button class="layui-btn">选择</button>
                                </div>
                                <div id="progressImg"></div>
                            </div>
                            <div class="layui-input-block layui-form-mid layui-word-aux icon-item">
                                <img src="/{:sysconf('icon')}" class="icon-log" id="icon-img" alt="">
                            </div>
                            <div class="errorText"></div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label required">版本信息</label>
                            <div class="layui-input-block" style="">
                                <input type="text" name="version" lay-verify="required" value="{:sysconf('version')}" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label required">版权信息</label>
                            <div class="layui-input-block">
                                <textarea name="copyright"
                                          class="layui-textarea">{:sysconf('copyright')}</textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="addBtn">确认保存</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">内容2</div>
            </div>
        </div>

    </div>
</div>

<script>
    let form = layui.form
        , upload = layui.upload
        , element = layui.element;

    let uploadInst = upload.render({
        elem: '#uploadImage',
        url: "{:url('upload/file')}",
        field: 'image'
        ,acceptMime:'image/*'
        , before: function (obj) {
            //预读本地文件示例，不支持ie8
            let index = layer.msg("上传中...",{icon:16,shade:0.5,time:999999})
        }
        , done: function (res) {
            layer.closeAll()
            //如果上传失败
            if (res.code != "{$result.normal}") {
                return layer.msg(res.msg,{icon:5,shade:0.5});
            }
            $("#icon").val(res.data.url)
            $(".icon-item").slideDown();
            $("#icon-img").attr("src","/"+res.data.url)
        }
        , error: function () {
            //演示失败状态，并实现重传
            var demoText = $('#errorText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
    });

    //监听提交
    form.on('submit(addBtn)', function (data) {
        hadmin.http("{:url('save')}",data.field).then(function (res) {
            if(res.code === 1){
                layer.msg(res.msg,{icon:6,shade:0.5},function () {
                    window.location.reload()
                })
            }
        })
        return false;
    });

</script>